<template>
  <el-card class="box-card">
    <el-row>
      <el-col :span="2">
        <span v-if="time.statusInfo">
          <el-tooltip class="item" effect="dark" :content="time.statusInfo" placement="top-start" v-if="time.statusInfo === '未审批' || time.statusInfo === '审批通过'">
            <i class="el-icon-success pointer" style="color: #67C23A"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="time.statusInfo" placement="top-start" v-if="time.statusInfo !== '未审批' && time.statusInfo !== '审批通过'">
            <i class="el-icon-warning pointer" style="color: #E6A23C"></i>
          </el-tooltip>
        </span>
        <span v-if="! time.statusInfo">
          &nbsp;
        </span>
      </el-col>
      <el-col :span="6" class="box-card-title">
        <span>{{ time.week }}</span> &nbsp; <span v-if="time.work_time">{{ time.work_time }} h</span>
      </el-col>
      <el-col :span="15">
        <span>{{ subMemo }}</span>

        <div v-show="! time.statusInfo" @click="submitVisible = true" class="pointer" style="color: #C0C4CC">
          <i class="el-icon-circle-plus"></i>
          添加工时
        </div>
      </el-col>
      <el-col :span="1" style="float: right;">
        <i @click="submitVisible = true" class="el-icon-arrow-down pointer" v-show="! submitVisible && time.statusInfo"></i>
        <i @click="submitVisible = false" class="el-icon-arrow-up pointer" v-show="submitVisible && time.statusInfo"></i>
      </el-col>
    </el-row>

    <el-form ref="form" :model="form" :rules="rules" label-width="50px" v-if="submitVisible" style="margin-top: 20px">
      <el-form-item label="维护" v-show="timesUser.firstclass === '维护工时'">
        <el-select v-model="form.maintainsubs" style="width: 100%">
          <el-option v-for="m in maintainsubses" :label="m.name" :value="m.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工时" prop="worktime">
        <el-input v-model.number="form.worktime" placeholder="单位小时(可小数)" @focus="countTime"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-autocomplete v-model="form.memo" :fetch-suggestions="filterMemo" style="width: 100%"></el-autocomplete>
      </el-form-item>

      <el-button @click="onSave" :loading="saveLoading" :disabled="disabled">保存</el-button>
      <el-button type="primary" @click="onSubmit" :loading="saveLoading" :disabled="disabled">保存并提交</el-button>
    </el-form>
  </el-card>
</template>
<script type="text/javascript">
  import { mapGetters, mapMutations, mapActions } from 'vuex'

  export default {
    props: ['time'],
    data () {
      return {
        saveLoading: false,
        submitVisible: false,
        form: {
          worktime: 0,
          memo: ''
        },
        rules: {
          worktime: [
            { required: true, message: '不能为空' },
            { type: 'number', max: 16, message: '不能大于16', trigger: 'change' }
          ],
          memo: [
            { required: true, message: '不能为空', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      ... mapGetters(['times', 'isDev', 'timesUser', 'maintainsubses', 'autoMemo']),
      disabled () {
        return this.time.statusInfo === '未审批' || this.time.statusInfo === '审批通过'
      },
      subMemo () {
        return this.time.memo && this.time.memo.length > 12 ? (this.time.memo.substr(0, 11) + '...') : this.time.memo
      },
      todayTime () {
        return {
          id: this.time.id,
          userid: this.timesUser.userName,
          workdate: this.form.times,
          firstclass: this.timesUser.firstclass,
          projectid: this.timesUser.projectid,
          maintainsubs: this.form.maintainsubs,
          projectleader: this.timesUser.projectleader,
          worktime: this.form.worktime,
          memo: this.form.memo
        }
      }
    },
    mounted () {
      this.countTime()
      Object.assign(this.form, this.time)
      this.$set(this.form, 'worktime', this.time.work_time)
      this.$set(this.form, 'maintainsubs', this.timesUser.maintainsubs)
    },
    methods: {
      ... mapMutations(['setUser', 'addAutoMemo']),
      ... mapActions(['addWorkTime', 'updateWorkTime', 'submitWorkTime', 'getTimes']),
      filterMemo (str, callback) {
        callback(str ? this.autoMemo.filter(x => x.value.indexOf(str) !== -1) : this.autoMemo)
      },
      countTime () {
        let now = new Date()
        let minutes = now.getMinutes() + now.getHours() * 60 - 8.5 * 60
        let hmTime = now.format('HHmm')
        let worktime;
        if (hmTime >= '0830' && hmTime <= '1200') {
          worktime = Number((minutes / 60).toFixed(1))
        } else if (hmTime > '1200' && hmTime <= '1300') {
          worktime = 3.5
        } else if (hmTime > '1300' && hmTime <= '1730') {
          worktime = Number((minutes / 60 - 1).toFixed(1))
        } else if (hmTime > '1730' && hmTime <= '1800') {
          worktime = 8
        } else if (hmTime > '1800') {
          worktime = Number((minutes / 60 - 1.5).toFixed(1))
        }

        this.$set(this.form, 'worktime', worktime)
      },
      saveUser () {
        let user = Object.assign({}, this.timesUser, { memo: this.form.memo, maintainsubs: this.form.maintainsubs })
        this.setUser(user)
      },
      onSave () {
        this.$refs.form.validate( valid => {
          if (valid) {
            this.saveLoading = true;
            (this.time.id ? this.updateWorkTime(this.todayTime) : this.addWorkTime(this.todayTime))
              .then(() => {
                this.saveUser()
                return this.getTimes()
              })
              .then(() => {
                this.$message.success('保存成功')
                this.saveLoading = false
                this.submitVisible = false
                this.addAutoMemo(this.form.memo)
              })
              .catch(message => {
                this.$message.error('保存失败: ' + message)
                this.saveLoading = false
              })
          }
        })
      },
      onSubmit () {
        this.$refs.form.validate( valid => {
          if (valid) {
            this.saveLoading = true
            let saveThen
            if (this.form.worktime === this.time.work_time && this.form.memo === this.time.memo) {
              saveThen = this.submitWorkTime(this.todayTime.id)
            } else {
              saveThen = (this.time.id ? this.updateWorkTime(this.todayTime) : this.addWorkTime(this.todayTime))
                .then(() => {
                  this.saveUser()
                  return this.getTimes()
                })
                .then(() => {
                  return this.submitWorkTime(this.todayTime.id)
                })
            }
            saveThen
              .then(() => {
                return this.getTimes()
              })
              .then(() => {
                this.$message.success('提交成功')
                this.saveLoading = false
                this.submitVisible = false
                this.addAutoMemo(this.form.memo)
              })
              .catch(message => {
                this.$message.error('提交失败: ' + message)
                this.saveLoading = false
              })
          }
        })
      },
    }
  }
</script>